<template>
	<view class='mainbody' v-if="!onLoading">
		<view class="content">
			<view class="main-content">
				<view class="totalAtm">
					<view class="atm">{{allData.totalAMT}}</view>
					<view class="unit">报销总金额(元)</view>
				</view>
				<view class="item">
					<view class="top">线上订单</view>
					<view class="item_content">
						<view class="itemLeft">飞机票</view>
						<view class="itemRight">{{allData.planesAmt}}元</view>
					</view>
					<view class="item_content">
						<view class="itemLeft">火车票</view>
						<view class="itemRight">{{allData.trainsAmt}}元</view>
					</view>
					<view class="item_content">
						<view class="itemLeft">酒店</view>
						<view class="itemRight">{{allData.hotelsAmt}}元</view>
					</view>
				</view>
				<view class="item">
					<view class="top">补录订单</view>
					<view class="item_content">
						<view class="itemLeft">飞机票</view>
						<view class="itemRight">{{allData.planesOtherAmt}}元</view>
					</view>
					<view class="item_content">
						<view class="itemLeft">火车票</view>
						<view class="itemRight">{{allData.trainsOtherAmt}}元</view>
					</view>
					<view class="item_content">
						<view class="itemLeft">酒店</view>
						<view class="itemRight">{{allData.hotelsOtherAmt}}元</view>
					</view>
					<view class="item_content">
						<view class="itemLeft">水/公路</view>
						<view class="itemRight">{{allData.highWaterAMT}}元</view>
					</view>
					<view class="item_content">
						<view class="itemLeft">其他</view>
						<view class="itemRight">{{allData.othersAMT}}元</view>
					</view>
				</view>
				<view class="item" v-if="allData.allowanceList && allData.allowanceList.length>0">
					<view class="top">补助信息</view>
					<view class="item_content" v-for="(item,i) in allData.allowanceList" :key="i">
						<view class="itemLeft">{{item.name}}</view>
						<view class="itemRight">{{item.allowanceAmt}}元</view>
					</view>
				</view>
			</view>
			<view class="main-content">
				<view class="item">
					<view class="top">报销账户信息</view>
					<view class="item_content">
						<view class="itemLeft">银行卡号</view>
						<view class="itemRight">{{allData.bankInfo.cardId}}</view>
					</view>
					<view class="item_content">
						<view class="itemLeft">收款银行名称</view>
						<view class="itemRight">{{allData.bankInfo.bankType}}</view>
					</view>
					<view class="item_content">
						<view class="itemLeft">支行信息</view>
						<view class="itemRight">{{allData.bankInfo.bankInfo}}</view>
					</view>
				</view>
			</view>
			
			<view class="approvalProcess">
				<view class="item">
					<view class="top">审批流程</view>
					<view class="processMes">
						<view class="porcessItem">
							<view class="itemLeft">
								<image class="typeImg" src="../../../static/index/tijiao.png" mode="aspectFit"></image>
								<view class="messView">
									<view class="nameItem">{{userName}}</view>
									<view class="proItem">提交申请</view>
								</view>
							</view>
						</view>
					</view>
					<view class="processMes">
						<view class="porcessItem">
							<view class="itemLeft">
								<view class="leftLine"></view>
								<image class="typeImg" src="../../../static/index/tijiao.png" mode="aspectFit"></image>
								<view class="messView">
									<view class="nameItem">上级领导</view>
									<view class="proItem">点击提交，可选择上级审批人。</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="end"></view>
			
			<!-- 底部按钮 -->
			<view class="bottomBtnView">
				<view class="submitBtn" @click="submitData()">提交报销</view>
			</view>
			<!-- <view class="picker" v-if="showPicker">
				<picker mode="date" :range="approverList" @change="checkApprover">
					<view>{{approverList[name] || '请选择'}}</view>
				</picker>
			</view> -->
			
			<view>
				<uni-popup ref="alertDialog" type="dialog">
					<uni-popup-dialog :type="msgType" cancelText="" confirmText="关闭" title="温馨提示"
						content="您好，您当前还有未完成的订单，暂时不可以报销。" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
				</uni-popup>
			</view>
		</view>
		
		<!-- :showPicker="showPicker" -->
		<selectApprover ref="btmPopup" :showPicker="showPicker" :travelApplicationId="travelApplicationId" :approverList="approverList"></selectApprover>
	</view>
</template>

<script>
	import {
		nextReimburse,
		submitReimburse,
		getApproverList
	} from "@/api/reimburseApply.js"
	import selectApprover from '@/pages/travelService/reimburse/selectApprover.vue'
	export default {
		components: {
			selectApprover
		},
		data() {
			return {
				travelApplicationId: '',
				queryFlag: '',
				allData: {},
				// approverList: [{
				// 		actorId: '112',
				// 		levelId: '张张'
				// 	},
				// 	{
				// 		actorId: '113',
				// 		levelId: 'guoguo'
				// 	}
				// ],
				approverList:[],
				showPicker: false,
				onLoading:false,
				userName: uni.getStorageSync('name') == '' ? '差旅' : uni.getStorageSync('name')
			}
		},
		onLoad(option) {
			console.log('查看详情的时候从上级传过来的数据11:', JSON.parse(decodeURIComponent(option.item)));
			let item = JSON.parse(decodeURIComponent(option.item))
			this.travelApplicationId = item.appId
			this.getAllData()
		},
		methods: {
			async getAllData(){
			    this.onLoading = true
				uni.showLoading({
					title:'数据正在努力的加载中...'
				})
				let params = {
					appId: this.travelApplicationId,
					queryFlag: '01'
				};
				let res = await nextReimburse(params)
				if (res[1].respCode && res[1].respCode === 'FJKBP0000') {
					this.allData = res[1].data
					this.onLoading = false
					setTimeout(()=>{
						uni.hideLoading()
					}, 500)
				}
			},
			submitData() {
				// 获取审批人列表
				let params = {
					taskType: '2'
				}
				getApproverList(params).then(res=>{
					if (res[1].data) {
						this.approverList = res[1].data
						this.approverList = [...this.approverList,...res[1].data]
						console.log('申请人列表：', res[1].data);
						this.showPicker = true
						console.log('this.showPicker:',this.showPicker);
						this.$refs.btmPopup.open()
					}
				})
				// this.showPicker = true
				// console.log('this.showPicker:',this.showPicker);
				// this.$refs.btmPopup.open()
			},
			dialogConfirm() {},
			dialogClose() {}
		}
	}
</script>

<style lang="scss" scoped>
	.mainbody {
		background: #f7f7f7;
		min-height: 100%;
	}

	.main-content {
		width: 750rpx;
		height: auto;
		margin-top: 20rpx;
		background-color: #fff;

		.totalAtm {
			display: flex;
			flex-direction: column;
			align-items: center;

			.atm {
				height: 65rpx;
				font-size: 72rpx;
				font-weight: 400;
				color: #333333;
				line-height: 65rpx;
				padding-top: 60rpx;
			}

			.unit {
				height: 28rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				line-height: 28rpx;
				padding-top: 20rpx;
				padding-bottom: 60rpx;
			}
		}

		.item {
			.top {
				padding: 29rpx 0 29rpx 32rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
				border-bottom: #E5E5E5 1px solid;
				margin-bottom: 28rpx;
			}

			.item_content {
				display: flex;
				justify-content: space-between;
				padding: 0 32rpx 28rpx 32rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #666666;
				line-height: 32rpx;
			}
		}
	}

	.end {
		margin-top: 60rpx;
		height: 180rpx;
	}

	.bottomBtnView {
		position: fixed;
		bottom: 0;
		margin-top: 60rpx;
		background: #fff;
		height: 154rpx;
		width: 750rpx;

		.submitBtn {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			;
			background: #FFA900;
		}
	}

	.alertDialog {
		::v-deep .uni-dialog-title {
			.uni-dialog-title-text {
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
			}
		}

		::v-deep .uni-dialog-content {
			display: block;
			font-size: 32rpx;
			font-weight: 400;
			color: #666666;
		}

		::v-deep .uni-dialog-button:first-child {
			display: none;
		}

		::v-deep .uni-border-left .uni-button-color {
			font-size: 36rpx;
			font-weight: 500;
			color: #FFA900;
		}
	}

	.approvalProcess {
		width: 750rpx;
		height: auto;
		margin-top: 20rpx;
		background-color: #fff;
		// margin-top: 20rpx;
		// padding-bottom: 216rpx;
		// background: #fff;

		.item {
			.top {
				padding: 29rpx 0 29rpx 32rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
				border-bottom: #E5E5E5 1px solid;
				margin-bottom: 28rpx;
			}

			.processMes {
				padding: 29rpx 32rpx 30rpx 32rpx;

				.porcessItem {
					display: flex;
					justify-content: space-between;

					.itemLeft {
						display: flex;

						.typeImg {
							position: relative;
							top: 8rpx;
							left: 0;
							height: 30rpx;
							width: 30rpx;
							margin-right: 8rpx;
						}

						.leftLine {
							position: relative;
							top: -80rpx;
							left: -24rpx;
							height: 73rpx;
							border-left: 1rpx solid #e5e5e5;
						}

						.messView {
							position: relative;

							.nameItem {
								height: 45rpx;
								line-height: 45rpx;
								font-size: 32rpx;
								color: #333;
							}

							.proItem {
								font-size: 26rpx;
								color: #666;
							}

							.cancelReason {
								margin-top: 16rpx;
								color: #ed3944;
								font-size: 26rpx;
							}

							.cancelLine {
								position: absolute;
								top: 50rpx;
								left: -26rpx;
								height: 73rpx;
								border-left: 1rpx solid #e5e5e5;
							}
						}
					}

					.itemRight {
						padding-top: 8rpx;
						font-size: 26rpx;
						color: #666;
					}
				}
			}
		}
	}
</style>
